<template>
  <div>
    <van-row>
      <van-col span="8">已得奖励</van-col>
    </van-row>
    <div style="height:1px;" class="xian"></div>

    <!-- USDT -->
    <van-row>
      <van-col span="8">
        USDT
        <span>0</span>
      </van-col>
      <van-col span="8" offset="2">
        BTC
        <span>0</span>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="8">
        EOS
        <span>0</span>
      </van-col>
      <van-col span="8" offset="2">
        ETH
        <span>0</span>
      </van-col>
    </van-row>
    <!-- 当前佣金比例 -->
    <van-row>
      <van-col span="8">当前佣金比例%</van-col>
      <van-col span="8">直接推荐 10</van-col>
      <van-col span="8">下级推荐 5</van-col>
    </van-row>
    <div class="xian"></div>

    <!-- 下面的切换 -->
    <van-tabs v-model="active">
      <van-tab title="直接推荐（4人）">
        <div v-show="dataList.length==0">
          <div>
            <img
              style="width:45px;height:45px;padding-top:100px;"
              src="../../assets/images/icon-record-gray.png"
              alt
            >
          </div>
          <div class="data">暂无相关数据</div>
          <div class="data1">快去邀请好友赚奖励吧~</div>
          <!-- 按钮 -->
          <div class="foor">
            <button>认购</button>
          </div>
        </div>
        <!-- 记录 -->
        <div v-show="dataList.length!=0">
          <!-- 我们的优势 -->
          <div class="advantage" v-for="i in 10" :key="i.index">
            <div class="advantage-list">
              <div class="advantage-item">
                <div class="advantage-icon">
                  <!-- <van-icon name="shop-o"></van-icon> -->
                  <img style="width:7px;height:7px;" src="../../assets/images/icon-dot.png" alt>
                </div>
                <div class="advantage-con">
                  <p class="title">
                    +86 132***239
                    <span style="position: absolute;right: 20px;">10usdt</span>
                  </p>
                  <p class="cont">acdr4566789..8hj</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 按钮 -->
         <van-button size="large">立即邀请</van-button>
        </div>
      </van-tab>
      <van-tab title="下级推荐（15人）">
        <!-- 记录 -->
         <div v-show="dataList.length==0">
          <div>
            <img
              style="width:45px;height:45px;padding-top:100px;"
              src="../../assets/images/icon-record-gray.png"
              alt
            >
          </div>
          <div class="data">暂无相关数据</div>
          <div class="data1">快去邀请好友赚奖励吧~</div>
          <!-- 按钮 -->
          <div class="foor">
            <button>认购</button>
          </div>
        </div>
        <div v-show="dataList.length!=0">
          <!-- 我们的优势 -->
          <div class="advantage" v-for="i in 10" :key="i.index">
            <div class="advantage-list">
              <div class="advantage-item">
                <div class="advantage-icon">
                  <!-- <van-icon name="shop-o"></van-icon> -->
                  <img style="width:7px;height:7px;" src="../../assets/images/icon-dot.png" alt>
                </div>
                <div class="advantage-con">
                  <p class="title">
                    +86 132***239
                    <span
                      style="position: absolute;right: 80px;font-size:12px;color:#666666;margin-top:18px;"
                    >推荐人：小A</span>
                    <span style="position: absolute;right: 20px;margin-top:18px">10usdt</span>
                  </p>
                  <p class="cont">2019-11-23 14:46:23</p>
                </div>
              </div>
            </div>
          </div>
          <!-- 按钮 -->
          <van-button size="large">立即邀请</van-button>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import vue from "vue";
import axios from "axios";
import {  } from "../../axios/api.js";
import { Row, Col, Tab, Tabs ,Button } from "vant";
export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button
  },
  data() {
    return {
       active: 0,
      dataList: []
    };
  },
  created() {},
  methods: {
    //返回上一页
    // onClickLeft() {
    //   this.$router.push("/mine");
    // }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/less/variable.less";
/deep/.van-tab {
  color: @base_textColor;
}
/deep/ .van-tabs__line {
  background: none;
}
/deep/ .van-tab--active {
  color: #d1a568;
}
/deep/ .van-tabs__wrap {
  position: relative;
}
/deep/ .van-hairline--bottom::after {
  border-bottom-width: 0;
}
/deep/ .van-hairline--top-bottom::after {
  border-width: 0;
}
/deep/ .van-tabs--line {
  padding-top: 0;
}

.van-row .van-col {
  font-size: 14px;
  font-family: PingFang-SC-Regular;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  padding-top: 15px;
}
.xian {
  width: 100%;
  height: 10px;
  background: rgba(246, 246, 248, 1);
  margin-top: 15px;
}
.data {
  font-size: 12px;
  font-family: PingFang-SC-Regular;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  margin-top: 15px;
}
.data1 {
  font-size: 12px;
  font-family: PingFang-SC-Regular;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
}
.foor button {
  width: 90%;
  height: 40px;
  background: #d1a658;
  position: fixed;
  bottom: 50px;
  left: 0;
  right: 0;
  margin: auto;
  font-size: 18px;
  border-radius: 20px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  border: 1px solid #d1a658;
}

.advantage {
  width: 100%;
  margin-top: 10px;
  border-top: 1px solid #efefef;
  //  border-bottom:1px solid #EFEFEF;
  .advantage-title {
    padding: 10px 0;
    font-size: @base_textSize;
    color: @base_textColor;
  }
  .advantage-list {
    padding: 10px 15px;
    .advantage-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    .advantage-item {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      padding: 10px 0;
      border-bottom: @base_boder;
      .advantage-icon {
        // width: 10%;
        margin-right: 10px;
        font-size: 3em;
        color: #ff976a;
        margin-top: -22px;
        i {
          vertical-align: super;
        }
      }
      .advantage-con {
        width: 90%;
        .title {
          text-align: left;
          font-size: 14px;
          font-weight: bold;
          color: #323233;
        }
        .cont {
          text-align: left;
          font-size: 12px;
          color: #323233;
          margin: 5px 0;
        }
        .title span {
          font-size: 13px;
          font-family: PingFang-SC-Medium;
          font-weight: 500;
          color: rgba(209, 165, 104, 1);

          right: 16px;
        }
      }
    }
  }
}
.van-button::before {
    content: " ";
    position: absolute;
    top: 69%;
    left: 50%;
    opacity: 0;
    width: 90%;
    height: 100%;
    border: inherit;
    border-color: #000;
    background-color: #000;
    border-radius: inherit;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    
}
.van-button--large {
    width: 90%;
    height: 45px;
    line-height: 48px;
    background: #d1a658;
  font-size: 18px;
  border-radius: 20px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  border: 1px solid #d1a658;
}
</style>


